<template>
  <div class="main shadow-lg p-3 mb-5 bg-white rounded">
    <h3 class="text-info">登录界面</h3>
    <form id="form">
      <div class="form-group">
        <input
          type="text"
          class="form-control username"
          placeholder="请输入用户名"
          v-model="uname"
        >
        <!-- <p class="username_ts"></p> -->
        <small class="form-text  username_ts"></small>
      </div>
      <div class="form-group">
        <input
          type="text"
          class="form-control userpwd"
          placeholder="请输入密码"
          v-model="userpwd"
        >
        <!-- <p class="userpwd_ts"></p> -->
        <small class="form-text  userpwd_ts"></small>
      </div>
      <button
        class="btn btn-success mb-3"
        @click="login"
      >登录</button>
      <router-link
        class="btn btn-primary"
        to="register"
      >无账号？去注册</router-link>
    </form>
    <p class="login_ts"></p>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      uname: '',
      userpwd: ''
    }
  },
  methods: {
    login(e) {
      e.preventDefault();
      if (this.uname == 'fff' && this.userpwd == '444') {
        setTimeout(() => {
          this.$router.push('/index')
          console.log("?")
        }, 1000)
        this.$message({
          message: '登陆成功',
          type: 'success'
        });
      } else {
        this.$message({
          message: '密码或者账号错误',
          type: 'error'
        });
      }
    }
  }
}
</script>

<style scoped>

.main {
  width: 400px;
  height: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.login_ts {
  text-align: center;
}
#form {
  display: flex;
  flex-direction: column;
}
</style>